<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/style.css">
    <title></title>
    <style>
        .j09_bottom {
            width: 1830px;
            height: 255px;
        }

        .video_item {
            width: 408px;
            height: 247px;
            margin-right: 65px;
            padding: 15px;
            float: left;
            position: relative;
            background-image: url("09_videobg.png");
            background-size: 100% 100%;
        }

        .video_item:last-of-type{
            margin-right: 0;
        }

        .video_item .play_btn {
            position: absolute;
            background-image: url("play_btn.png");
            background-color: rgba(0, 0, 0, .5);
            background-size: 92px 92px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            left: 15px;
            right: 15px;
            top: 15px;
            bottom: 15px;
            z-index: 100;
        }

        .video_item video, .video_item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .file_name{
            font-size: 16px;
            margin-top: 20px;
            color: #fff;
        }

    </style>
</head>
<body style="overflow: hidden;">
<div class="j09_bottom">
    <div class="video_box fix">
    </div>
</div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<!--<script src="../../js/swiper.min.js"></script>-->
<script src="../../js/common.js"></script>
<script>
	$(function () {
		getJson('zyp_szls.json', {}, function (res) {
			if (res.data && res.data.length) {
				let file = res.data[0].attachments.split(',');
				let fileType = res.data[0].attachmentsExt.split(',');
				let fileName = res.data[0].attachName.split(',');

				for (let i = 0; i < file.length; i++) {
                    console.log(i);
					if (fileType[i].includes('mp4') || fileType[i].includes('3gp') || fileType[i].includes('wmv') || fileType[i].includes('mov') || fileType[i].includes('m4v') || fileType[i].includes('avi') || fileType[i].includes('flv')) {
						$('.video_box').append(`<div class="video_item">
<!--                            <div class="play_btn"></div>-->
                            <video src="../../video/(${i+1}).mp4" controls></video>
                            <p class="file_name el">${fileName[i]}</p>
                        </div>`)
					} else {
						$('.video_box').append(`<div class="video_item">
                            <img src="../../img/all/all${Math.ceil(Math.random()*4)}.png" alt="">
                            <p class="file_name el">${fileName[i]}</p>
                        </div>`)
					}
				}
			}
		})

		/**
		 * 点击播放
		 */
		$('body').on('click', '.play_btn', function () {
			$(this).addClass('hide');
			$(this).siblings('video')[0].play()
		})
	})
</script>
</html>
